<template>
  <div class="member-order-page" v-if="orderStatus">
    <!-- tabs组件 -->
    <XtxTabs v-model="activeName" @tab-click="clickTab">
      <XtxTabsPanel
        v-for="item in orderStatus"
        :key="item.name"
        :label="item.label"
        :name="item.name"
      ></XtxTabsPanel>
    </XtxTabs>

    <!-- 订单列表 -->
    <div class="order-list">
      <!-- 暂无数据时显示加载状态， -->
      <div v-if="loading" class="loading"></div>
      <div class="none" v-if="!loading && orderList.length === 0">暂无数据</div>
      <OrderItem
        v-for="item in orderList"
        :key="item.id"
        :order="item"
        @on-cancel-order='onCancelOrder'
        @on-delete-order='onDeleteOrder'
        @on-confirm-order='onConfirmOrder'
        @on-logistics-order='onLogisticsOrder'
      ></OrderItem>
    </div>

    <!-- 分页组件 -->
      <XtxPagination
      v-if="total > requestParams.pageSize"
      @current-change="currentChange"
      :total="total"
      :currPage="requestParams.page"
      :pagesize="requestParams.pageSize"
    ></XtxPagination>

<!-- 对于像：对话框，消息提示，确认提示，通知组件 适合使用传送门 Teleport -->
    <Teleport to='#dailog'>
      <!-- 取消组件 -->
      <OrderCancel ref="orderCancelCom"></OrderCancel>
      <!-- 查看物流组件 -->
      <OrderLogistics ref="logisticsOrderCom"></OrderLogistics>
    </Teleport>
  </div>
</template>

<script>
// 模拟发货地址 :https://apipc-xiaotuxian-front.itheima.net/member/order/consignment/1423492500677922817
import { provide, reactive, ref, watch } from 'vue'
import { orderStatus } from '@/api/constants'
import { confirmOrder, deleteOrder, findOrderList } from '@/api/order'
import OrderItem from './components/order-item.vue'
import OrderCancel from './components/order-cancel.vue'
import Confirm from '@/components/library/Confirm'
import Message from '@/components/library/Message'
import OrderLogistics from './components/order-logistics.vue'

// 取消订单逻辑逻辑封装(这里的封装可以在setup外写，在导入进来(其它封装一样)，当时没注意)
// 这里的封装接到的item都是子组件传来的order
export const useCancelOrder = () => {
  const orderCancelCom = ref(null)
  const onCancelOrder = (item) => {
    console.log(item)
    // item 就是你要取消的订单
    orderCancelCom.value.open(item)
  }

  return { onCancelOrder, orderCancelCom }
}

export // 封装逻辑-查看物流
const useLogisticsOrder = () => {
  const logisticsOrderCom = ref(null)
  const onLogisticsOrder = (item) => {
    console.log(item)
    logisticsOrderCom.value.open(item)
    console.log(item)
  }
  return { onLogisticsOrder, logisticsOrderCom }
}

// 封装逻辑-确认收货
export const useConfirmOrder = () => {
  const onConfirmOrder = (item) => {
    // item 就是你要确认收货的订单
    console.log(item)
    Confirm({ title: '温馨提示', text: '您确认收到货吗？确认后货款将会打给卖家。' }).then(async () => {
      await confirmOrder(item.id)
      Message({ type: 'success', message: '确认收货成功' })
      // 确认收货后状态变成 待评价(4 为待评价)
      item.orderState = 4
    })
  }

  return { onConfirmOrder }
}
export default {
  components: { OrderItem, OrderCancel, OrderLogistics },
  name: 'MemberOrder',
  setup () {
    const activeName = ref('all')

    // 根据 clickTab 点击拿到不同的索引赋值给 订单状态,拿到不同的订单状态
    // 利用watch监听当数据发生改变时根据不同 的 订单状态 拿到不同的数据请求
    // 然后就页码重置为1,防止在切换不同tab栏时页码改变时还是原来的页码，而不是从第一页开始
    const clickTab = (tab) => {
      console.log(tab)
      // 此时：tab.index 就是订单的状态
      requestParams.orderState = tab.index
      requestParams.page = 1
    }

    provide('activeName', activeName)

    // 数据请求所需要的数据
    const requestParams = reactive({
      page: 1, // 页码
      pageSize: 5, // 页容量
      orderState: 0 // 订单状态，1为待付款、2为待发货、3为待收货、4为待评价、5为已完成、6为已取消，未传该参数或0为全部
    })

    const orderList = ref([])

    // 加载状态
    const loading = ref(true)
    // 总页数
    const total = ref(0)
    // 利用watch监听当数据发生改变时根据不同 的 订单状态 拿到不同的数据请求
    const findOrderListFn = () => {
      findOrderList(requestParams).then((res) => {
        console.log(res)
        loading.value = true
        total.value = res.result.counts
        orderList.value = res.result.items
        loading.value = false
      })
    }
    // 使用侦听器，监听 requestParams 的改变
    watch(
      requestParams,
      () => {
        findOrderListFn()
      },
      { immediate: true }
    )

    // 分页
    const currentChange = (val) => {
      requestParams.page = val
    }

    // 删除订单( 这里的封装接到的item都是子组件传来的order)
    const onDeleteOrder = (item) => {
      console.log(item.id)
      Confirm({ title: '温馨提示', text: '亲，您确认删除该条订单吗？' }).then(async () => {
        await deleteOrder(item.id)
        Message({ type: 'success', message: '删除订单成功' })
        findOrderListFn()
      }).catch(err => console.log(err))
    }

    return {
      activeName,
      clickTab,
      orderStatus,
      orderList,
      loading,
      currentChange,
      total,
      requestParams,
      ...useCancelOrder(),
      onDeleteOrder,
      ...useConfirmOrder(),
      ...useLogisticsOrder()
    }
  }
}
</script>

<style scoped lang="less">
.order-list {
  background: #fff;
  padding: 20px;
}
.loading {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(255, 255, 255, 0.9) url(~@/assets/images/loading.gif)
    no-repeat center;
}
.none {
  height: 400px;
  text-align: center;
  line-height: 400px;
  color: #999;
}
</style>
